<template>
  <div class="histogram" ref="myDivRef"></div>
</template>

<script>
var echarts = require('echarts')
// var echarts = require('echarts/lib/echarts') // 引入echarts主模块
// require('echarts/lib/chart/bar') // 引入柱状图
// // 引入提示框和标题组件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/legend')
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.myDivRef)
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '1%',
        right: '10%',
        bottom: '3%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['周一', ' ', '周三', ' ', '周五', ' ', '周日'],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: '#2c9ed6'
        },
        axisLine: {
          lineStyle: {
            color: '#008acd'
          }
        }
      },
      yAxis: {
        type: 'value',
        show: true,
        min: 0,
        max: 1200,
        splitNumber: 5,
        interval: 200,
        boundaryGap: [0.1, 0.1],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: '#2c9ed6'
        },
        axisLine: {
          lineStyle: {
            color: 'red'
          }
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['#fefefe', '#f9f9f9']
          }
        }
      },
      series: [
        {
          name: '单选题',
          type: 'bar',
          stack: 'total',
          color: '#50d6d9',
          data: [79, 52, 200, 334, 390, 330, 220]
        },
        {
          name: '多选题',
          type: 'bar',
          stack: 'total',
          color: '#c8b6eb',
          data: [80, 52, 200, 334, 390, 330, 220]
        },
        {
          name: '简答题',
          type: 'bar',
          stack: 'total',
          color: '#77c3f4',
          data: [30, 52, 200, 334, 390, 330, 220]
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
.histogram {
  width: 253px;
  height: 160px;
}
</style>
